<template>
  <div class="order-detail-expired">
    <div class="page-header">
      <h2>订单详情-已失效</h2>
      <p>显示所有已失效状态的处方流转订单详情</p>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="search-filter-section">
      <div class="search-box">
        <input 
          v-model="searchFilter" 
          type="text" 
          placeholder="搜索订单号、患者姓名、医生姓名..."
          @input="applySearchFilter"
        />
        <button class="search-btn">搜索</button>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="table-container">
      <table class="data-table">
        <thead>
          <tr>
            <th>订单号</th>
            <th>处方ID</th>
            <th>患者姓名</th>
            <th>患者电话</th>
            <th>医生姓名</th>
            <th>药房名称</th>
            <th>支付金额</th>
            <th>失效原因</th>
            <th>失效时间</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="order in paginatedData" :key="order.id">
            <td>{{ order.orderNo }}</td>
            <td>{{ order.prescriptionId }}</td>
            <td>{{ order.patientName }}</td>
            <td>{{ order.patientPhone }}</td>
            <td>{{ order.doctorName }}</td>
            <td>{{ order.pharmacyName }}</td>
            <td>¥{{ order.paymentAmount.toFixed(2) }}</td>
            <td>{{ order.expiredReason }}</td>
            <td>{{ formatDateTime(order.expiredTime) }}</td>
            <td>{{ formatDateTime(order.createdAt) }}</td>
            <td>
              <button class="action-btn view-btn" @click="viewOrderDetail(order.id)">
                查看详情
              </button>
              <button class="action-btn restore-btn" @click="restoreOrder(order.id)">
                恢复订单
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <button 
        :disabled="currentPage === 1" 
        @click="changePage(currentPage - 1)"
        class="page-btn"
      >
        上一页
      </button>
      
      <button 
        v-for="page in visiblePages" 
        :key="page"
        :class="['page-btn', { active: currentPage === page }]"
        @click="changePage(page)"
      >
        {{ page }}
      </button>
      
      <button 
        :disabled="currentPage === totalPages" 
        @click="changePage(currentPage + 1)"
        class="page-btn"
      >
        下一页
      </button>
      
      <span class="page-info">
        第 {{ currentPage }} 页，共 {{ totalPages }} 页，总计 {{ totalRecords }} 条记录
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

// 搜索和筛选
const searchFilter = ref('')

// 分页
const currentPage = ref(1)
const pageSize = ref(10)

// 模拟数据
const orderData = ref([
  {
    id: 1,
    orderNo: 'PO20241201003',
    prescriptionId: 'P003',
    patientName: '王五',
    patientPhone: '13800138003',
    doctorName: '赵医生',
    pharmacyName: '百姓药房',
    paymentAmount: 234.00,
    expiredReason: '支付超时',
    expiredTime: '2024-12-01 12:00:00',
    createdAt: '2024-12-01 11:00:00'
  },
  {
    id: 2,
    orderNo: 'PO20241201007',
    prescriptionId: 'P007',
    patientName: '周九',
    patientPhone: '13800138007',
    doctorName: '郑医生',
    pharmacyName: '海王星辰',
    paymentAmount: 78.90,
    expiredReason: '患者取消',
    expiredTime: '2024-12-01 18:00:00',
    createdAt: '2024-12-01 17:15:00'
  },
  {
    id: 3,
    orderNo: 'PO20241201015',
    prescriptionId: 'P015',
    patientName: '杨十七',
    patientPhone: '13800138015',
    doctorName: '刘医生',
    pharmacyName: '仁心大药房',
    paymentAmount: 156.80,
    expiredReason: '库存不足',
    expiredTime: '2024-12-01 21:00:00',
    createdAt: '2024-12-01 20:30:00'
  },
  {
    id: 4,
    orderNo: 'PO20241201016',
    prescriptionId: 'P016',
    patientName: '黄十八',
    patientPhone: '13800138016',
    doctorName: '陈医生',
    pharmacyName: '康泰药房',
    paymentAmount: 89.50,
    expiredReason: '支付超时',
    expiredTime: '2024-12-01 22:00:00',
    createdAt: '2024-12-01 21:15:00'
  },
  {
    id: 5,
    orderNo: 'PO20241201017',
    prescriptionId: 'P017',
    patientName: '胡十九',
    patientPhone: '13800138017',
    doctorName: '张医生',
    pharmacyName: '同仁堂',
    paymentAmount: 203.40,
    expiredReason: '患者取消',
    expiredTime: '2024-12-01 23:00:00',
    createdAt: '2024-12-01 22:30:00'
  }
])

// 计算属性
const filteredData = computed(() => {
  let filtered = orderData.value

  // 按搜索关键词筛选
  if (searchFilter.value.trim()) {
    const keyword = searchFilter.value.toLowerCase()
    filtered = filtered.filter(order => 
      order.orderNo.toLowerCase().includes(keyword) ||
      order.patientName.toLowerCase().includes(keyword) ||
      order.doctorName.toLowerCase().includes(keyword) ||
      order.pharmacyName.toLowerCase().includes(keyword) ||
      order.patientPhone.includes(keyword) ||
      order.expiredReason.toLowerCase().includes(keyword)
    )
  }

  return filtered
})

const totalRecords = computed(() => filteredData.value.length)
const totalPages = computed(() => Math.ceil(totalRecords.value / pageSize.value))

const paginatedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredData.value.slice(start, end)
})

const visiblePages = computed(() => {
  const pages = []
  const maxVisible = 5
  let start = Math.max(1, currentPage.value - Math.floor(maxVisible / 2))
  let end = Math.min(totalPages.value, start + maxVisible - 1)
  
  if (end - start + 1 < maxVisible) {
    start = Math.max(1, end - maxVisible + 1)
  }
  
  for (let i = start; i <= end; i++) {
    pages.push(i)
  }
  
  return pages
})

// 方法
const applySearchFilter = () => {
  currentPage.value = 1
}

const formatDateTime = (dateTime: string) => {
  return new Date(dateTime).toLocaleString('zh-CN')
}

const viewOrderDetail = (orderId: number) => {
  console.log('查看订单详情:', orderId)
  // 这里可以跳转到详细的订单信息页面
}

const restoreOrder = (orderId: number) => {
  console.log('恢复订单:', orderId)
  // 这里可以打开恢复订单确认弹窗
}

const changePage = (page: number) => {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page
  }
}

onMounted(() => {
  // 初始化
})
</script>

<style scoped>
.order-detail-expired {
  padding: 60px 80px 60px 120px;
  min-height: 100vh;
  background-color: white;
}

.page-header {
  margin-bottom: 40px;
}

.page-header h2 {
  font-size: 28px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 10px 0;
}

.page-header p {
  font-size: 16px;
  color: #7f8c8d;
  margin: 0;
}

.search-filter-section {
  background: #f8f9fa;
  padding: 30px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-box {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}

.search-box input {
  flex: 1;
  padding: 12px 20px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.search-box input:focus {
  outline: none;
  border-color: #007bff;
}

.search-btn {
  padding: 12px 30px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.search-btn:hover {
  background: #0056b3;
}

.table-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 30px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  background: #f8f9fa;
  padding: 18px 15px;
  text-align: left;
  font-weight: 600;
  color: #495057;
  border-bottom: 2px solid #e9ecef;
  font-size: 14px;
}

.data-table td {
  padding: 18px 15px;
  border-bottom: 1px solid #e9ecef;
  font-size: 14px;
  color: #495057;
}

.data-table tbody tr:hover {
  background: #f8f9fa;
}

.action-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-right: 8px;
}

.view-btn {
  background: #007bff;
  color: white;
}

.view-btn:hover {
  background: #0056b3;
}

.restore-btn {
  background: #ffc107;
  color: #212529;
}

.restore-btn:hover {
  background: #e0a800;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.page-btn {
  padding: 10px 15px;
  border: 2px solid #e9ecef;
  background: white;
  color: #495057;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.page-btn:hover:not(:disabled) {
  border-color: #007bff;
  color: #007bff;
}

.page-btn.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  margin-left: 20px;
  color: #6c757d;
  font-size: 14px;
}

@media (max-width: 768px) {
  .order-detail-expired {
    padding: 20px;
  }
  
  .search-box {
    flex-direction: column;
  }
  
  .data-table {
    font-size: 12px;
  }
  
  .data-table th,
  .data-table td {
    padding: 12px 8px;
  }
  
  .pagination {
    flex-wrap: wrap;
  }
}
</style>


